<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#cont{
			width: 400px;
			height: 400px;
			border: 1px solid aqua;
			position: relative;
			margin: 100px auto;
			/* overflow: hidden; */
			background-image: url('./gold.jpg');
		}
		#main{
			width: 400px;
			height: 400px;
			/* border: 1px solid lime; */
			position: relative;
			top: -100px;
		}
		.row{
			height: 100px;
		}
		.row div{
			width: 98px;
			height: 98px;
			border: 1px solid fuchsia;
			float: left;
		}
		.black{
			background-image: url('./mn.png');
		}
		body{
			color: red;
			text-align: center;
			background-image: url('./brushed.jpg') ;
		}

	</style>
</head>
<body>
	<h1>别踩白块:搭建框架</h1>
	<h2 id="sc">0</h2>
	<div id="cont">
		<div id="main"></div>
	</div>
</body>
<script type="text/javascript">
	var main = document.getElementById('main');
	var clock = null;
	var state = true; //true代表游戏中 false代表停止
	var speed = 2;
	var rowid = 0;

	function getStyle(el,attr){
		return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el,null)[attr];
	}


	function cDiv(className){
		var div = document.createElement('div');
		if(className){
			div.className = className;
		}
		return div;
	}

	function cRow(){
		//rowid++;

		var ind = Math.floor(Math.random()*4);

		var row = cDiv('row');

		for(var i=0; i<4; i++){
			if(i == ind){
				var t = cDiv('black');
				// t.innerHTML = '' + rowid;
				row.appendChild(t);
			}else{
				var t = cDiv();
				// t.innerHTML = '' + rowid;
				row.appendChild(t);
			}
		}
		if(main.firstChild){
			main.insertBefore(row, main.firstChild);
		}else{
			main.appendChild(row);
		}
		row.pass = false;
	}

	function init(){
		for(var i=0; i<4; i++){
			cRow();
		}

		main.onclick = function(ev){
			if (state == false) {
				return;
			}
			ev.target = ev.target || ev.srcElement;

			if(ev.target.className == ''){
				fail();
			}else{
				var score = document.getElementById('sc');

				var sc = parseInt(score.innerHTML) + 1;
				score.innerHTML = sc;
				if(sc % 10 == 0){
					speed += 2;
				}
				ev.target.className = '';
				ev.target.parentNode.pass = true;
				console.log(1);
			}
		}
		clock = window.setInterval('move();',40);
	}

	function move(){
		if (state == false) {
			return;
		}
		var top = getStyle(main,'top');
		top = parseInt(top) + speed;

		main.style.top = top + 'px';

		if(top > 0){ //触底
			var lastId = main.children.length - 1;
			if(main.children[lastId].pass == false){ //游戏失败
				fail();
				return;
			} else {
				main.style.top = '-100px'; //归位
				cRow();
				var lastId = main.children.length - 1;
				main.removeChild(main.children[lastId]);
			}
		}
	}

	function fail(){
		clearInterval(clock);
		state = false;
		var over = document.getElementById('cont');
		 over.style.backgroundImage= "url('./over.jpg')"
		// alert('重开一局');
		// console.log('输了');
	}

	init();
</script>
</html>